import PageContainer from '@/components/PageContainer';
import { GStyleSheet } from '@/utils/DarkMode';
import i18n from 'i18n-js';
import { Input, Cell, Textarea } from '@taroify/core';
import { Image, View, BaseEventOrig } from '@tarojs/components';
import { GButton } from '@/components/GButton';
import { useState } from 'react';
import { observer } from 'mobx-react-lite';
import Taro, { useDidShow } from '@tarojs/taro';
import { useUseStateStore } from '@/hooks';
import regular from '@/utils/regular';
import Toast from '@/utils/Toast';
import { feedback } from '@/services/aepApi';
import { delay } from '@/utils';
import { InputProps as TaroInputProps } from '@tarojs/components/types/Input';

const MAX_LENGTH = 200;

const FeedbackScreen = () => {
  const styles = dstyles.useDynamicStyle();
  const userState = useUseStateStore();
  const [mobile, setMobile] = useState('');
  const [content, setContent] = useState('');

  useDidShow(() => {
    if (userState.userInfo.mobile) {
      setMobile(userState.userInfo.mobile);
    } else {
      userState.getUserInfo().then(data => {
        console.log('userInfo', data);
        if (data.mobile) {
          setMobile(data.mobile);
        }
      });
    }
  });

  const handleSend = async () => {
    let phone = mobile;
    if (phone.startsWith('+')) {
      phone = phone.replace('+', '');
    }

    if (!regular.phone.test(phone)) {
      Toast.error(i18n.t('INPUT_CORRECT_PHONE'));
      return;
    }

    Toast.loading(i18n.t('LOADING'));

    // aep服务器反馈
    const res = await feedback({
      phone: phone || '',
      content: content || '',
    });
    Toast.hideLoading();
    if (res.success) {
      /**
       * 忽略接口的返回
       * AEP判断了手机号是否合法，但是没有考虑海外手机，暂时先忽略这个错误
       */
      Toast.success(i18n.t('THANK_YOU_FEEDBACK'));
      await delay(1);
      Taro.navigateBack();
    } else {
      Toast.error(i18n.t('SUBMIT_FAILURE_PLEASE_RETRY'));
    }
  };

  const handleTextareaChange = (e: BaseEventOrig<TaroInputProps.inputEventDetail>) => {
    if (e.detail.value.normalize().length > MAX_LENGTH) {
      e.detail.value = e.detail.value.slice(0, MAX_LENGTH);
    }
    setContent(e.detail.value);
  };

  return (
    <PageContainer title={i18n.t('FEED_BACK')}>
      <View style={styles.container}>
        <View>
          <Cell
            style={styles.item}
            icon={
              <Image
                src='https://xbgroup-1251025085.cos.ap-guangzhou.myqcloud.com/cybertron/users/479438/media/%E6%89%8B%E6%9C%BA%402x_1657521855167.png'
                style={styles.icon}
              />
            }>
            <Input
              style={styles.input}
              placeholder={i18n.t('ENTER_CONTACT')}
              placeholderStyle='font-size: 14px;'
              value={mobile}
              onChange={e => setMobile(e.detail.value)}
            />
          </Cell>

          <Cell
            style={styles.textItem}
            icon={
              <Image
                src='https://xbgroup-1251025085.cos.ap-guangzhou.myqcloud.com/cybertron/users/479438/media/icon_input%402x_1657521855147.png'
                style={styles.editIcon}
              />
            }>
            <Textarea
              style={styles.textarea}
              limit={MAX_LENGTH}
              placeholder={i18n.t('PLEASE_INPUT_CONTENT')}
              value={content}
              onChange={handleTextareaChange}
            />
          </Cell>
        </View>

        <GButton text={i18n.t('SUBMIT')} onPress={handleSend} />
      </View>
    </PageContainer>
  );
};

const dstyles = GStyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-between',
    height: '100%',
  },
  icon: {
    width: 16,
    height: 16,
  },
  editIcon: {
    width: 16,
    height: 16,
    marginTop: 8,
  },
  item: {
    marginTop: 14,
    height: 54,
    alignItems: 'center',
  },
  input: {
    marginLeft: 10,
    fontSize: 16,
  },
  textItem: {
    marginTop: 14,
  },
  textarea: {
    marginLeft: 10,
  },
});

export default observer(FeedbackScreen);
